<template>
  <div>
    <TitleComponent mainTitle="提现记录" />
    <avue-data-panel :option="option"></avue-data-panel>
    <avue-crud
      :option="crudData.Listoption"
      :data="crudData.data"
      v-model:page="crudData.page"
      @on-load="onLoad"
      @isSelected="change"
      @select="cellClickHandler"
    >
      <template #menu="{ row, index, size }">
        <el-dropdown
          v-if="row.orderStatus != '1'"
          @command="(command) => editRow(command, row)"
        >
          <el-icon><More /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="success">提现成功</el-dropdown-item>
              <el-dropdown-item command="fail">提现失败</el-dropdown-item>
              <el-dropdown-item divided command="Manual"
                >手动成功</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>

      <template #rechargeAmount="{ row }">
        <el-tag
          :key="row.rechargeAmount"
          :type="row.rechargeAmount"
          effect="light"
          round
        >
          {{ row.rechargeAmount }}
        </el-tag>
      </template>
      <template #orderStatus="{ row }">
        <el-tag
          :type="getTagType(row.orderStatus)"
          :effect="getTagEffect(row.orderStatus)"
        >
          {{ getOrderStatusLabel(row.orderStatus) }}
        </el-tag>
      </template>

      <template #menu-left="{ size }">
        <el-button
          type="success"
          icon="el-icon-check"
          :size="size"
          @click="toggleAllSelection()"
          >选中{{ SelectList.length }}项</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          :size="size"
          @click="toggleSelection()"
          >取消选择</el-button
        >
      </template>
    </avue-crud>

    <el-dialog
      v-model="centerDialogVisible"
      title=""
      width="440"
      destroy-on-close
      center
      class="custom-dialog"
    >
      <div class="swal2-header">
        <div
          class="swal2-icon swal2-question swal2-animate-question-icon"
        ></div>
        <div class="swal2_fs">{{ Poptitle }}</div>
      </div>
      <div class="swal2_he">请仔细核对</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="confirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="centerDialogVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="Withdrawalfailed"
      title="提现失败"
      width="600"
      destroy-on-close
      center
    >
      <avue-form :option="inputData"></avue-form>
    </el-dialog>
  </div>
</template>
  
  <script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import TitleComponent from "@/components/title/index.vue";

const centerDialogVisible = ref(false); //弹框
const Withdrawalfailed = ref(false); //失败弹框
const Poptitle = ref("确认直接成功?"); //弹框标题
const SelectList = ref([]); //选中
// 输入框
const inputData = {
  column: [
    {
      label: "拒绝理由",
      prop: "input",
      size: "large",
      span: 24,
    },
  ],
};

const option = reactive({
  span: 6,
  data: [
    {
      click: function (item) {
        alert(JSON.stringify(item));
      },
      title: "提现金额",
      count: "131413.00",
      icon: "el-icon-message",
      color: "#00a7d0",
    },
    {
      click: function (item) {
        alert(JSON.stringify(item));
      },
      title: "到账金额",
      count: "118271.700000",
      icon: "el-icon-message",
      color: "#00a7d0",
    },
  ],
});

const crudData = reactive({
  page: {
    pageSize: 20,
    total: 0,
  },
  Listoption: {
    menu: false,
    delBtn: false,
    editBtn: false,
    selection: true,
    excelBtn: true,
    border: true,
    index: true,
    expandLevel: 3,
    headerAlign: "center",
    align: "center",
    tree: true,
    labelWidth: 100,
    tip: false,
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    addBtn: false,
    column: [
      {
        label: "手机号",
        prop: "phoneNumber",
      },
      {
        label: "用户编号",
        prop: "userId",
      },
      {
        label: "所属代理",
        prop: "agent",
      },
      {
        label: "用户等级",
        prop: "userLevel",
      },
      {
        label: "充值类型",
        prop: "rechargeType",
      },
      {
        label: "充值金额",
        prop: "rechargeAmount",
      },
      {
        label: "到账金额",
        prop: "receivedAmount",
      },
      {
        label: "付款截图",
        prop: "paymentScreenshot",
        type: "upload",
        listType: "picture-img",
      },
      {
        label: "充值时间",
        prop: "rechargeTime",
        type: "datetime",
        sortable: true,
      },
      {
        label: "订单状态",
        prop: "orderStatus",
        type: "datetime",
        dicData: [
          { label: "已完成", value: 1 },
          { label: "待处理", value: 2 },
          { label: "提现失败", value: 3 },
        ],
      },
      {
        label: "充值通道",
        prop: "rechargeChannel",
        type: "select",
        dicData: [
          { label: "支付宝", value: "支付宝" },
          { label: "微信", value: "微信" },
          { label: "银行", value: "银行" },
        ],
      },
      {
        label: "操作",
        prop: "menu",
        width: 60,
        slot: true,
      },
    ],
  },

  data: [
    {
      phoneNumber: "17547400800",
      userId: "1",
      agent: "代理A",
      userLevel: "VIP",
      rechargeType: "在线支付",
      rechargeAmount: "1000",
      receivedAmount: "980",
      rechargeChannel: "支付宝",
      channelAmount: "1000",
      paymentScreenshot: "https://via.placeholder.com/100",
      cardNumber: "1234 5678 1234 5678",
      name: "张三",
      rechargeTime: "2024-07-06 10:00:00",
      orderStatus: 1,
    },
    {
      phoneNumber: "17547400801",
      userId: "2",
      agent: "代理B",
      userLevel: "普通会员",
      rechargeType: "银行卡转账",
      rechargeAmount: "500",
      receivedAmount: "490",
      rechargeChannel: "微信",
      channelAmount: "500",
      paymentScreenshot: "https://via.placeholder.com/100",
      cardNumber: "2345 6789 2345 6789",
      name: "李四",
      rechargeTime: "2024-07-06 11:00:00",
      orderStatus: 2,
    },
    {
      phoneNumber: "17547400802",
      userId: "3",
      agent: "代理C",
      userLevel: "高级会员",
      rechargeType: "网银支付",
      rechargeAmount: "300",
      receivedAmount: "290",
      rechargeChannel: "银行",
      channelAmount: "300",
      paymentScreenshot: "https://via.placeholder.com/100",
      cardNumber: "3456 7890 3456 7890",
      name: "王五",
      rechargeTime: "2024-07-06 12:00:00",
      orderStatus: 3,
    },
  ],
});

const onLoad = (page) => {
  crudData.page.total = 40;
};

// 确认
const confirm = () => {
  centerDialogVisible.value = false;
};
const cellClickHandler = (row) => {
  console.log(row,'DDDDD');
  SelectList.value = [];
  SelectList.value = row;
  console.log('DDDD')
};

const editRow = (state, form) => {
  console.log(state);
  if (state == "success") {
    Poptitle.value = "确认提现成功吗?";
    centerDialogVisible.value = true;
  } else if (state == "fail") {
    // Poptitle.value = "确认直接成功?";
    Withdrawalfailed.value = true;
  } else if (state == "Manual") {
    Poptitle.value = "确认直接成功?";
    centerDialogVisible.value = true;
  }
};

// 删除
const rowDel = (form, index, done) => {
  ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      done(form); // 删除逻辑，此处暂未实现删除功能
    })
    .catch(() => {});
};

const getTagType = (orderStatus) => {
  switch (orderStatus) {
    case 1:
      return "success";
    case 2:
      return "warning";
    case 3:
      return "danger";
    default:
      return "";
  }
};

const getTagEffect = (orderStatus) => {
  switch (orderStatus) {
    case 1:
      return "dark";
    case 2:
      return "plain";
    case 3:
      return "light";
    default:
      return "dark";
  }
};

const getOrderStatusLabel = (orderStatus) => {
  const statusMap = {
    1: "已完成",
    2: "待处理",
    3: "提现失败",
  };
  return statusMap[orderStatus] || "未知状态";
};
</script>
  
  <style scoped lang="scss">
.d_block {
  margin: 1rem;
  padding-bottom: 0 !important;
  display: flex;
  .btn {
    color: #4e9876;
    border-color: #4e9876;
  }
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-header {
  margin: 1rem;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}
.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}
.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}
.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}
.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
    0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}
.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}

.avue-form__group ::v-deep .el-form-item {
  width: 800px !important;
}
</style>
  